<template>
  <div class="wrap pt16-lr24">
    <u-sticky>
      <div class="nav_bar flex_sb_cen">
        <div v-for="(item, index) in navConfig" :key="index" class="nav_item" @tap="Router.push('gl_market_info', {title: item.name, id: item.id})">
          <Image :name="item.logo" oss size="74" />
          <div class="title">{{ item.name }}</div>
        </div>
      </div>
    </u-sticky>
    <div class="list">
      <AutoList
        :params="{ 'typeIdList[0]':'1','typeIdList[1]':'2','typeIdList[2]':'8'}"
        :request="getMainMeterialList"
        height="calc(100vh - 360rpx)"
        mb="160"
        @list="mainMeterialList = $event"
      >
        <div v-for="item in mainMeterialList" :key="item.materialId" class="list_item mt16" @tap="navigatoFn(item)">
          <div class="item_one">
            <div class="flex_sb_start">
              <div class="item_text">{{ item.title }}</div>
              <Icon v-if="item.typeId === 8" :name="iconName(item.content)" size="120" />
              <Image v-else :name="item.cover" :overspread="true" size="120" />
            </div>
            <div class="item_time mt16">发布于{{ item.publishTime }}</div>
          </div>
          <div class="item_two flex_sb_cen">
            <div class="flex_sb_cen">
              <Icon :styles="{marginRight: '8rpx'}" name="icon-reading" size="30" />
              <span>{{ item.totalReadingCount }}</span>
            </div>
            <div class="flex_sb_cen">
              <Icon :styles="{marginRight: '8rpx'}" name="icon-like" size="28" />
              <span>{{ item.totalLikingCount }}</span>
            </div>
            <div class="flex_sb_cen">
              <Icon :styles="{marginRight: '8rpx'}" name="icon-fenxiang1" size="26" />
              <span>{{ item.totalTransferringCount }}</span>
            </div>
            <div class="flex_sb_cen" @tap.stop="jumpToPageFn(item)">
              <Icon :styles="{marginRight: '8rpx'}" name="icon-biaodan" size="26" />
              <span style="color: #1890ff;">{{ item.formCount }}</span>
            </div>
          </div>
        </div>
      </AutoList>
    </div>
  </div>
</template>

<script lang="ts" setup>
import AutoList from '@C/AutoList.vue'
import { onShow, Router } from '@U/common'
import { weixinSubscription } from '@U/Auth'
import Icon from '@C/Icon.vue'
import { getMaterialTypeList, getMainMeterialList } from '@P/marketCenter/request'
import { MsgLoading, MsgLoadingClear } from '@C/Msg'
import { computed, ref } from 'vue'
import Image from '@C/Image.vue'

// 获取营销中心首页素材列表
const mainMeterialList = ref([])
onShow(async () => {
  await getMaterialTypeListFn()
})

const iconName = computed(() => (docUrl: string) => {
    let temp = ''
    switch (docUrl.split('.')[1]) {
      case 'pdf': temp = 'icon-pdf-2'; break
      case 'doc':
      case 'docx': temp = 'icon-word-2'; break
      case 'xls':
      case 'xlsx': temp = 'icon-excel-2'; break
      case 'ppt':
      case 'pptx': temp = 'icon-ppt-2'; break
    }
    return temp
})
const navLogo = [
  {
    id: 1,
    title: '彩页',
    logo: 'caiye',
  },
  {
    id: 2,
    title: '软文',
    logo: 'ruanwen',
  },
  {
    id: 3,
    title: '海报',
    logo: 'haibao',
  },
  {
    id: 4,
    title: '话术',
    logo: 'huashu',
  },
  {
    id: 5,
    title: '图片',
    logo: 'tupian',
  },
  {
    id: 6,
    title: '视频',
    logo: 'shipin',
  },
  {
    id: 7,
    title: '音频',
    logo: 'yinpin',
  },
  {
    id: 8,
    title: '文档',
    logo: 'wendang',
  },
]
const navConfig = ref([])
// 获取素材类别列表
const getMaterialTypeListFn = async () => {
  await MsgLoading()
  const { data } = await getMaterialTypeList().finally(() => MsgLoadingClear())
  navConfig.value = data.map((item: object) => {
    navLogo.forEach(item1 => {
      if (item1.id === item.id) item.logo = item1.logo
    })
    return item
  })
}
const navigatoFn = (item: object) => {
  weixinSubscription()
  if (item.typeId === 1 || item.typeId === 2) return Router.push('articleInfo', { materialId: item.materialId, pageTitle: item.typeId === 1 ? '彩页' : '软文' })
  if (item.typeId === 8) return Router.push('gl_market_details', { materialId: item.materialId, pageTitle: '文档' })
}
const jumpToPageFn = (item: object) => {
  weixinSubscription()
  if (item.formCount === 0) return
  Router.push('gl_market_form', { materialId: item.materialId })
}
</script>

<style lang="less" scoped>
.wrap {
  .nav_bar {
    background: #FFFFFF;
    border-radius: 24rpx;
    padding: 36rpx 56rpx 0;
    flex-wrap: wrap;
    .nav_item {
      width: 74rpx;
      margin: 0 98rpx 32rpx 0;
      &:nth-child(4n) {
        margin-right: 0;
      }
      .logo {
        height: 74rpx;
        background: rgba(51,136,255,0.1);
        border-radius: 28rpx;
      }
      .title {
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(0,0,0,0.85);
        line-height: 40rpx;
        text-align: center;
      }
    }
  }
  .list {
    .list_item {
      background: #FFFFFF;
      border-radius: 24rpx;
      padding: 26rpx 28rpx 16rpx;
      .item_one {
        padding: 0 0 18rpx 14rpx;
        border-bottom: 2rpx solid #E5E5E5;
        .item_text {
          width: 494rpx;
          font-size: 32rpx;
          font-weight: 400;
          color: rgba(0,0,0,0.85);
          line-height: 40rpx;
        }
        .item_img {
          width: 120rpx;
          height: 120rpx;
          background-color: #ccc;
        }
        .item_time {
          font-size: 24rpx;
          font-weight: 400;
          color: rgba(0,0,0,0.25);
          line-height: 34rpx;
        }
      }
      .item_two {
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(0,0,0,0.45);
        line-height: 34rpx;
        padding: 14rpx 0 0 14rpx;
      }
    }
  }
}
</style>
